/*
 * @作者: 京涛
 * @时间: 2020-09-11 20:33:41
 * @最后修改时间: 2020-09-12 10:30:12
 * @FilePath: \曲美家具项目\js\wholeHousePaging.js
 * @项目名称: 每天都要记得写代码啊！
 */
/**
 * 全屋定制页面的切换导航栏和分页操作
 */
$(document).ready(function () {
  var pageIndex = 1;
  var tagIndex = 0;
  $(".whcTags ul li a").each(function (aIndex, aSelf) {
    aSelf.onclick = function () {
      pageIndex = 1;
      tagIndex = aIndex;
      //点击那个whcTag哪个变红 并且对应的显示preMiddleLeft
      $(".whcTags ul li").each(function (liIndex, li) {
        $(this).removeClass("checkedLi")
      })
      $(".whcTags ul li").eq(aIndex).addClass("checkedLi");
      //点击那个whcTag对应的preMiddleLeft显示
      $(".preMiddleLeft").each(function (leftIndex, left) {
        left.className = "preMiddleLeft fl hidden"
      });
      $(".preMiddleLeft").eq(aIndex).removeClass("hidden");


      /**
       * 分页操作
       *    1.点击下一页 页数增加
       *    2.点击对应的页数显示对应ul的内容
       */
      function pageTiaoZhuan() {
        $(".preMiddleLeft").eq(tagIndex).find("ul").each(function (preUlIndex, preUl) {
          preUl.className = "whcMiddleUl hidden clear";
        });
        $(".preMiddleLeft").eq(tagIndex).find("ul").eq(pageIndex - 1).attr("class", "whcMiddleUl clear")
        //点击页数显示对应的currentPage
        $(".prePagingBtn").eq(tagIndex).find("a").each(function (prePagingBtnIndex2, prePagingBtn2) {
          if (prePagingBtnIndex2 >= 1 && prePagingBtnIndex2 <= 2) {
            prePagingBtn2.className = ""
          }
        })
        $(".prePagingBtn").eq(tagIndex).find("a").eq(pageIndex).attr("class", "currentPage");
      }

      //2.点击对应的页数显示对应的内容
      $(".prePagingBtn").eq(tagIndex).find("a").each(function (prePagingBtnIndex, prePagingBtn) {
        //设置页面索引来关联所有的点击页面的操作
        if (prePagingBtnIndex >= 1 && prePagingBtnIndex <= 2) {
          prePagingBtn.onclick = function () {
            //点击页数显示对应的ul
            pageIndex = prePagingBtnIndex;
            pageTiaoZhuan();
          }
        }
        //点击上一页的时候 判断是否在第一页，如果在第一页则不操作，如果在第二页则显示下一个的
        if (prePagingBtnIndex == 0) {
          prePagingBtn.onclick = function () {
            pageIndex--;
            //如果当前页面是第一页，则不能点击上一页，且将页数重置为1
            if (pageIndex == 0) {
              pageIndex = 1;
            }
            if (pageIndex != 0) {
              pageTiaoZhuan();
            }
          }
        }
        // 点击下一页的时候判断是否在最后一页
        if (prePagingBtnIndex == 3) {
          prePagingBtn.onclick = function () {
            pageIndex++;
            //如果当前页面是第一页，则不能点击上一页，且将页数重置为1
            if (pageIndex == 3) {
              pageIndex = 2;
            }
            if (pageIndex != 3) {
              pageTiaoZhuan();
            }
          }
        }

        //   //设置一个事件监听，每次一点击就判断是否在最后一页或者在第一页，对应的下一页和上一页不可点击
        prePagingBtn.addEventListener("click", function () {
          if (pageIndex == 1) {
            $(".prePagingBtn").eq(tagIndex).find("a").eq(0).attr("class", "prevPage canNotCursor");
          } else {
            $(".prePagingBtn").eq(tagIndex).find("a").eq(0).attr("class", "prevPage");
          }
          if (pageIndex == 2) {
            $(".prePagingBtn").eq(tagIndex).find("a").eq(3).attr("class", "nextPage canNotCursor");
          } else {
            $(".prePagingBtn").eq(tagIndex).find("a").eq(3).attr("class", "nextPage");
          }
        })
      });

    }
  })
  /**
   *  preMiddleRightPart2 input框里面当点击的时候显示一个红色的框
   */
  $(".preMiddleRightPart2 input").focus(function () {
    $(this).css({
      border: "1px solid #9b3232"
    })
  });
  $(".preMiddleRightPart2 input").blur(function () {
    $(this).css({
      border: "1px solid #d2d2d2"
    })
  });

  //点击任意一个免费预约量房按钮，都会弹出预约框
  $(".whcMiddleUlTitle a").click(function () {
    $(".whcOrderPopup").addClass("whcOrderPopupShow");
  });
  $(".whcOrderPopupClose").click(function () {
    $(".whcOrderPopup").removeClass("whcOrderPopupShow");
  })

  //当点击免费预约弹窗的input框的时候显示一个红色的边框
  $(".whcOrderPopupContent>.applyForInputName").focus(function () {
    $(this).css({
      border: "1px solid #ac2925",
    });
  });
  $(".whcOrderPopupContent>.applyForInputName").blur(function () {
    $(this).css({
      border: "1px solid #d2d2d2",
    });
  });

  $(".whcOrderPopupContent>.applyForInputTel").focus(function () {
    $(this).css({
      border: "1px solid #ac2925",
    });
  });
  $(".whcOrderPopupContent>.applyForInputTel").blur(function () {
    $(this).css({
      border: "1px solid #d2d2d2",
    });
  })
})